<!-- 设置线索/来人、回款顾问目标 -->
<template>
  <div>
    <div class="flex flex-horizontal-between" style="margin: 10px">
      <div>
        <span class="red" v-show="tipsFlag">顾问目标总和需大于或等于案场目标</span>
      </div>
      <Button type="primary" v-if="!isCheck && unlocking('0102010604')" @click="importTargetFun">
        导入目标
      </Button>
    </div>
    <div class="goal-count clearfix">
      <div class="count-txt">
        <p class="label">
          案场{{ modalTypeText }}目标： {{ caseTotal }}{{ modalType == 'PAYMENT' ? '万' : '组' }}
        </p>
        <p class="count">
          顾问{{ modalTypeText }}目标：
          <span :class="[tipsFlag ? 'red' : '']">
            {{ counselorTotal || 0 }}{{ modalType == 'PAYMENT' ? '万' : '组' }}
          </span>
        </p>
      </div>
    </div>
    <dt-grid ref="table" :onFetch="onFetch" :height="300"></dt-grid>
    <import-target ref="importTarget" @success="updateData" />
    <adjust-log ref="adjustLogRef" />
  </div>
</template>

<script>
  import column from '../opt/setCounselorColumns'
  import importTarget from './importTarget.vue'
  import adjustLog from '@/views/casemanagement/report/goalReach/components/adjustLog.vue'

  export default {
    components: {
      importTarget,
      adjustLog
    },
    data() {
      return {
        modalType: '',
        setGoalType: '',
        caseTotal: '',
        list: [],
        counselorTotal: null,
        tipsFlag: false,
        settingId: '',
        importFlag: false, //判断是否导入过目标
        isCheck: true //区分查看编辑
      }
    },
    watch: {
      counselorTotal(val) {
        if (Number(this.caseTotal) > Number(val)) {
          this.tipsFlag = true
        } else {
          this.tipsFlag = false
        }
      },
      caseTotal(val) {
        if (Number(val) > Number(this.counselorTotal)) {
          this.tipsFlag = true
        } else {
          this.tipsFlag = false
        }
      }
    },
    computed: {
      modalTypeText() {
        let obj = {
          CLUETARGET: '线索',
          VISITOR: '来人',
          SUBSCRIPTION: '认购',
          CONTRACT: '签约',
          PAYMENT: '回款'
        }
        return obj[this.modalType]
      }
    },
    methods: {
      init(data) {
        this.isCheck = data.isCheck
        this.caseTotal = data.caseTotal
        this.modalType = data.modalType
        this.setGoalType = data.setGoalType
        this.settingId = data.settingId
        if (!this.importFlag) {
          this.list = data.counselorList
          this.getTotalNum(data.counselorList)
        }
        this.$refs.table.init(this, new column(this))
        this.$refs.table.fetch()
      },
      getTotalNum(arr) {
        this.counselorTotal = 0
        arr.forEach((item) => {
          if (this.modalType == 'PAYMENT') {
            this.counselorTotal += Number(item.target2)
          } else {
            this.counselorTotal += Number(item.target1)
          }
        })
        if (this.modalType == 'PAYMENT') {
          this.counselorTotal = this.counselorTotal.toFixed(2)
        }
      },
      importTargetFun() {
        this.$refs.importTarget.show({ modalType: this.modalType, settingId: this.settingId })
      },
      onFetch() {
        return Promise.resolve(this.list)
      },
      updateData(data) {
        this.importFlag = true
        this.list = data
        this.getTotalNum(this.list)
        this.$refs.table.fetch()
      },
      changeLog(row) {
        let data = { ...row, type: 'user', title: '顾问目标调整记录', curState: this.modalType }
        this.$refs.adjustLogRef.show(data)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .goal-count {
    background-color: #e6f6ff;
    padding: 10px;
  }
  .count-txt {
    font-size: 16px;
    padding: 0 10px;
    min-width: 11%;
  }
  .red {
    color: #e9142e;
  }
</style>
